<script>
export default {
  name: 'SearchForm',
  props: {
    formOption: {
      type: Object,
      default: () => {
        return {
          items: [],
          data: {},
          rules: {}
        }
      }
    },
    inline: {
      type: Boolean,
      default: true
    },
    formName: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: '60px'
    },
    labelPosition: {
      type: String,
      default: 'left'
    },
    // 是否显示按钮
    showBtn: {
      type: Boolean,
      default: false
    },
    // 是否显示更多按钮
    showArrow: {
      type: Boolean,
      default: true
    },
    // 按钮列表
    btnList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 排列方式
    layout: {
      type: String,
      default: 'row'
    }
  },
  data() {
    return {
      showMore: true
    }
  },
  computed: {
    layoutStyle() {
      if (this.layout !== 'column') {
        return {
          display: 'flex',
          'flex-wrap': 'wrap'
        }
      }
      return {}
    },
    btnStyle() {
      return {
        display: 'flex',
        flex: 1,
        'justify-content': 'flex-end'
      }
    }
  },
  methods: {
    // 生成input
    setUpInput(item) {
      return (
        <el-input
          type={item.type}
          value={this.$attrs.value[item.value]}
          size={item.size ? item.size : 'small'}
          style={item.style ? item.style : 'width: 210px'}
          disabled={item.disabled ? item.disabled : false}
          clearable={item.clearable ? item.clearable : true}
          maxlength={item.showWordLimit ? item.maxlength : 40}
          prefix-icon={item.prefixIcon ? item.prefixIcon : ''}
          suffix-icon={item.suffixIcon ? item.suffixIcon : ''}
          show-word-limit={item.showWordLimit ? item.showWordLimit : false}
          placeholder={item.placeholder ? item.placeholder : '请输入' + item.label}
          onInput={e => this.$set(this.$attrs.value, item.value, e.trim())}
          onClear={() => item.onClear && item.onClear()}
        >
          <template v-if={item.slot} slot={item.slot}>
            {item.slotText}
          </template>
        </el-input>
      )
    },
    // 生成下拉选项
    setUpSelect(item) {
      let options = item.selectList ? item.selectList : []
      return (
        <el-select
          value={this.$attrs.value[item.value]}
          size={item.size ? item.size : 'small'}
          style={item.style ? item.style : 'width: 210px'}
          multiple={item.multiple ? item.multiple : false}
          disabled={item.disabled ? item.disabled : false}
          clearable={item.clearable ? item.clearable : true}
          filterable={item.filterable ? item.filterable : false}
          collapse-tags={item.collapseTags ? item.collapseTags : false}
          placeholder={item.placeholder ? item.placeholder : '请选择' + item.label}
          filter-method={item.filterMethod}
          onChange={e => {
            this.$set(this.$attrs.value, item.value, e)
            item.onChange && item.onChange(e)
          }}
          onClear={() => item.onClear && item.onClear()}
        >
          {options.map(item => {
            return (
              <el-option
                key={item.value}
                label={item.label}
                value={item.value}
                disabled={item.disabled}
              ></el-option>
            )
          })}
        </el-select>
      )
    },
    // 生成分组下拉菜单
    setUpGroupSelect(item) {
      let groups = item.groupList ? item.groupList : []
      return (
        <el-select
          value={this.$attrs.value[item.value]}
          size={item.size ? item.size : 'small'}
          style={item.style ? item.style : 'width: 210px'}
          disabled={item.disabled ? item.disabled : false}
          clearable={item.clearable ? item.clearable : true}
          placeholder={item.placeholder ? item.placeholder : '请选择' + item.label}
          onChange={e => {
            this.$set(this.$attrs.value, item.value, e)
          }}
          onClear={() => item.onClear && item.onClear()}
        >
          {groups.map(group => {
            return (
              <el-option-group key={group.label} label={group.label}>
                {group.options.map(item => {
                  return (
                    <el-option
                      key={item.id}
                      label={item.label}
                      value={item.id}
                      disabled={item.disabled}
                    ></el-option>
                  )
                })}
              </el-option-group>
            )
          })}
        </el-select>
      )
    },
    // 生成日期范围
    setUpDaterange(item) {
      return (
        <el-date-picker
          type={item.type.toLowerCase()}
          value={this.$attrs.value[item.value]}
          size={item.size ? item.size : 'small'}
          end-placeholder="请选择结束日期"
          start-placeholder="请选择开始日期"
          disabled={item.disabled ? item.disabled : false}
          style={item.style ? item.style : 'width: 320px'}
          format={item.format ? item.format : 'yyyy-MM-dd'}
          value-format={item.valueFormat ? item.valueFormat : 'yyyy-MM-dd'}
          range-separator={item.rangeSeparator ? item.rangeSeparator : '至'}
          onInput={e => this.$set(this.$attrs.value, item.value, e)}
          onChange={() => item.onChange && item.onChange()}
        ></el-date-picker>
      )
    },
    // 生成月份范围
    setUpMonthrange(item) {
      return (
        <el-date-picker
          type={item.type.toLowerCase()}
          value={this.$attrs.value[item.value]}
          size={item.size ? item.size : 'small'}
          end-placeholder="请选择结束月份"
          start-placeholder="请选择开始月份"
          disabled={item.disabled ? item.disabled : false}
          style={item.style ? item.style : 'width: 320px'}
          value-format={item.valueFormat ? item.valueFormat : 'yyyy-MM'}
          range-separator={item.rangeSeparator ? item.rangeSeparator : '至'}
          onInput={e => this.$set(this.$attrs.value, item.value, e)}
          onChange={() => item.onChange && item.onChange()}
        ></el-date-picker>
      )
    },
    // 生成日期和时间范围
    setUpDatetimerange(item) {
      return (
        <el-date-picker
          type={item.type.toLowerCase()}
          value={this.$attrs.value[item.value]}
          size={item.size ? item.size : 'small'}
          end-placeholder="请选择结束日期"
          start-placeholder="请选择开始日期"
          disabled={item.disabled ? item.disabled : false}
          style={item.style ? item.style : 'width: 340px'}
          format={item.format ? item.format : ''}
          value-format={item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm:ss'}
          range-separator={item.rangeSeparator ? item.rangeSeparator : '至'}
          onInput={e => this.$set(this.$attrs.value, item.value, e)}
          onChange={() => item.onChange && item.onChange()}
        ></el-date-picker>
      )
    },
    // 生成级联选择器
    setUpCascader(item) {
      return (
        <el-cascader
          options={item.options ? item.options : []}
          props={item.props ? item.props : { props: { multiple: true } }}
          size={item.size ? item.size : 'samll'}
          disabled={item.disabled ? item.disabled : false}
          clearable={item.clearable ? item.clearable : true}
          collapse-tags={item.collapseTags ? item.collapseTags : false}
          show-all-levels={item.showAllLevels ? item.showAllLevels : true}
          onChange={e => {
            this.$set(this.$attrs.value, item.value, e)
            item.onChange && item.onChange(e)
          }}
          onClear={() => item.onClear && item.onClear()}
        ></el-cascader>
      )
    },
    // 将生成表单项的事件名首字母转大写
    replaceStr(str) {
      let reg = /\b(\w)|\s(\w)/g
      return str.replace(reg, function (m) {
        return m.toUpperCase()
      })
    },
    //生成表单项
    setUpFormItems(item) {
      let type = this.replaceStr(item.type)
      return this['setUp' + type](item)
    }
  },
  // 渲染el-form
  render() {
    let formItems = this.formOption.items || []
    return (
      <div class="search-form">
        <el-form
          ref={this.formName}
          inline={this.inline}
          attrs={{ model: this.$attrs.value }}
          rules={this.formOption.rules || {}}
          label-width={this.labelWidth || '50px'}
          label-position={this.labelPosition || 'left'}
          size={this.size ? this.size : 'small'}
          style={this.layoutStyle}
          // style={this.showArrow && !this.showMore ? 'height:50px; overflow: hidden;' : ''}
        >
          {formItems.map(item => {
            return (
              <el-form-item
                prop={item.value}
                label={`${item.label ? item.label + '：' : ''}`}
                rules={item.rules}
                label-width={item.labelWidth ? item.labelWidth : this.labelWidth}
              >
                {this.setUpFormItems(item)}
              </el-form-item>
            )
          })}
          <div class="more-control-box" style={this.btnStyle}>
            {this.btnList.map(item => {
              return (
                <el-form-item style={'margin-bottom: 0'}>
                  <el-button
                    onClick={() => item.onClick && item.onClick()}
                    type={item.type}
                    loading={item.loading}
                  >
                    {item.label}
                  </el-button>
                </el-form-item>
              )
            })}
            {
              //   <div
              //   class="more-control-text"
              //   v-show={this.showArrow}
              //   onClick={() => {
              //     this.showMore = !this.showMore
              //   }}
              // >
              //   <el-button type="text" class="ft-14" style={'margin-right: 10px'}>
              //     {this.showMore ? '收起' : '展开'}
              //   </el-button>
              //   <i
              //     style="color: #409eff;cursor: pointer;"
              //     class={this.showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'}
              //   />
              // </div>
            }
          </div>
        </el-form>
        <slot></slot>
      </div>
    )
  }
}
</script>
